<script setup>
import { showToast } from 'vant';
import { ref } from 'vue'

const emit = defineEmits(['onSelectCate'])
const cateList = ref([
  '上衣',
  '外套',
  '套转',
  '婴儿套装',
  '打底裤',
  '泳衣',
  '玩具',
  '睡衣',
  '短裙',
  '短裤',
  '连体衣',
  '连体裙',
  '连体袜',
  '配饰',
  '长裤',
  '鞋子',
])
const selectCateList = ref([])
const onItem = (item) => {
  if (!selectCateList.value.includes(item)) {
    selectCateList.value.push(item)
  }
  else {
    selectCateList.value = selectCateList.value.filter((brand)=>{
      return brand !== item
    })
  }
}

const onReset = () =>{
  selectCateList.value = []
}

const onSure = () =>{
  if(selectCateList.value.length === 0){
    return showToast('请选择分类')
  }
  emit('onSelectCate',selectCateList.value)
  
}

</script>

<template>
  <div class="main">
    <div class="list">
      <span v-for="item in cateList" :key="item" @click="onItem(item)"
        :class="[selectCateList.includes(item) ? 'active' : 'normal']">{{ item }}</span>
    </div>
    <div class="footer">
      <div class="reset txt" @click="onReset">重置</div>
      <div class="sure txt" @click="onSure">确定</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main {
  padding-top: 90px;
  width: 100%;
  background-color: #fff;

  .list {
    display: flex;
    flex-wrap: wrap;
    column-gap: 5%;
    margin-right: 5%;
    margin-left: 5%;
    justify-content: space-between;
    margin-top: 7%;
    margin-bottom: 8%;

    span {
      background-color: #f0f0f0;
      display: inline-block;
      width: 18.75%;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
      margin-bottom: 3%;
    }

    .active {
      color: orange;
    }

    .normal {
      color: #666;
    }
  }

  .footer {
    border-top: 1px solid #999;
    background-color: #fff;
    height: 40px;
    width: 100%;
    display: flex;

    .txt {
      font-size: 12px;
      line-height: 40px;
      text-align: center;
    }

    .reset {
      flex: 1;
      background-color: #fff;
      color: #999;
    }

    .sure {
      flex: 1;
      background-color: #333;
      color: #fff;
    }
  }
}</style>